<template>
<div class="weekend">
	<div class="weekend-title">
		周末去哪
	</div>
	<ul>
	  <router-link
        tag="li"
        class="item border-bottom"
        v-for="item of weekendList"
        :key="item.id"
        :to="'/detail/' + item.id"
      >
		<div class="item-img-wrapper">
			<img class="item-img" :src="item.imgUrl" />
		</div>
        <div class="item-info">
          <p class="item-title">{{item.title}}</p>
          <p class="item-desc">{{item.desc}}</p>
        </div>
      </router-link>
	</ul>
</div>
</template>

<script>
export default{
  name: 'HomeWeekend',
	props: {
		weekendList: Array
	},
  data () {
	  return {
	  }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/mixins.styl'	
.weekend-title
	height: .8rem
	line-height: .8rem
	text-indent: .2rem
	background: #eee
.item-img-wrapper
	overflow: hidden
	width: 100%
	height: 0rem
	padding-bottom: 37.09%
	.item-img
		width: 100%
.item-info
	flex: 1
	padding: .1rem
	min-width: 0
	.item-title
		line-height: .54rem
		font-size: .32rem
		ellipsis()
	.item-desc
		line-height: .4rem
		color: #ccc
		ellipsis()
</style>
